Channel: Google Chrome Developers
Category: Science & Technology
Tags: jecelyn yeenwhat are devtools tipsgoogle developerchromedevelopersgoogle developershow to use devtools tipspurpose: educategds: yespr_pr: chrometype: devbyte (deck cleanup 0-10min)chrome developer toolsgoogle chrome developersgoogle chromechrome devtoolsintro to devtools tipsdevtools tips tutorialchrome developerdeveloperchrome developersdevtools
Description: Tips on debugging CSS Grid with Chrome DevTools. Chapters: 0:00 - Intro 0:20 - Highlight grid with badge 0:40 - Extend grid lines 1:10 - Use grid line numbers 1:54 - Visualize grid line names 2:33 - Visualize grid area names 3:11 - Show track sizes 3:39 - Edit grid visually with the grid editor Links: Learn grid debugging tools → goo.gle/devtools-grid Learn CSS grid → goo.gle/3pT2cw3 Catch more DevTools Tips → goo.gle/DevToolsTips Subscribe to Google Chrome Developers → goo.gle/ChromeDevs #DevToolsTips #Chrome #Developer